<template>
	<view>
		<!-- F1 搜索栏-->
		<xz-search-bar></xz-search-bar>
		<!-- F2 轮播广告-->
		<view class="carousel">
			<swiper indicator-active-color="#0aa1ed" indicator-dots autoplay :interval="3000" :duration="1000">
				<swiper-item v-for="(item,i) in carouselItems" :key="item.cid">
					<view class="swiper-item">
						<image :src="$url.base+item.img" alt=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- F3 首页推荐-->
		<uni-card isFull padding="0">
			<view slot="title" class="card-title">
				<image src="../../static/img/computer_icon.png"></image>
				<text>首页推荐 / 1F</text>
				<navigator url="/pages/product-list/product-list">更多</navigator>
			</view>
			<!-- 卡片宫格 -->
			<uni-grid :column="2" :square="false" :showBorder="false">
				<uni-grid-item v-for="(item,i) in recommendedItems" :key="item.pid">
					<uni-card class='grid-card' margin="8rpx" padding="0">
						<image class="pic" :src="$url.base+item.pic"></image>
						<view class="title">
							<text>{{item.title}}</text>
						</view>
						<view class="bottom">
							<text>￥{{item.price}}</text>
							<button type="primary" size="mini" @click="tolink(i)">查看详情</button>
						</view>
					</uni-card>

				</uni-grid-item>
			</uni-grid>
		</uni-card>
		<!-- F4 最新上架-->
		<!-- F5 热销单品-->
		<!-- F6 底部菜单/版权-->
		<!-- F7 页签栏-->
		<!-- F8 (固定定位)返回顶部-->
		<xz-go-top></xz-go-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carouselItems: '', //轮播广告数据
				newArrivalItems: '', //新品上架数据
				recommendedItems: '', //首页推荐数据
				topSaleItems: '' //热销单品

			}
		},
		methods: {
			tolink(i) {
				let pid=this.recommendedItems[i].pid
				
				uni.navigateTo({
					url:`/pages/product-details/product-details?pid=${pid+1}`
				})
			}
		},
		onLoad() {
			// console.log('=======')
			// console.log(this.$url)
			// 页面加载时 异步请求服务器首页数据
			uni.showLoading({
				title: '请稍后'
			})
			let url = this.$url.indexData
			// console.log(url)
			uni.request({
				url,
				success: (res) => {
					console.log(res.data)
					this.carouselItems = res.data.carouselItems,
						this.newArrivalItems = res.data.newArrivalItems,
						this.recommendedItems = res.data.recommendedItems,
						this.topSaleItems = res.data.topSaleItems
				},
				fail: (err) => {
					console.log(err)
				},
				complete: () => {
					uni.hideLoading()
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// 渐变背景色（背景图片）
		background-image: linear-gradient(180deg, $xz-theme 50px, $uni-bg-color-grey 200px);

		// swiper
		.carousel {
			margin: 10rpx;
			border-radius: $uni-border-radius-base;
			overflow: hidden;

			swiper {
				width: 730rpx;
				height: 292rpx;

				.swiper-item {
					image {
						width: 730rpx;
						height: 292rpx;
					}
				}
			}
		}
	}

	.card-title {
		display: flex;
		align-items: center;

		// justify-content: space-between;
		image {
			width: 50rpx;
			height: 40rpx;
			margin: 15rpx 10rpx 15rpx 0;
		}

		text {
			flex: 1;
		}

		navigator {
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm;
		}

	}

	.grid-card {
		.pic {
			width: 280rpx;
			height: 210rpx;
		}

		.title {
			font-size: $uni-font-size-sm;
			// 文字最多显示一行 超出隐藏
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.bottom{
			display: flex;
			align-items: center;
			text{
				font-size: $uni-font-size-sm;
				color: $xz-theme;
				flex: 1;
			}
			button{
				padding: 0 10rpx;
				font-size: $uni-font-size-sm;
			}
		}
	}
</style>
